<template>
  <wd-form custom-class="custom-form2" ref="form" :model="mode">
    <wd-cell title="真实姓名" title-width="150rpx">
      <wd-input
        type="text"
        v-model="mode.name"
        prop="name"
        :rules="[{ required: true, message: '请输入真实姓名' }]"
        placeholder="请输入真实姓名"
        suffix-icon="edit"
      />
    </wd-cell>
    <wd-cell title="手机号" title-width="150rpx">
      <wd-input
        prop="phone"
        clearable
        v-model="mode.phone"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请输入手机号' }]"
        suffix-icon="edit"
      />
    </wd-cell>
    <wd-cell title="验证码" title-width="150rpx">
      <wd-input v-model="mode.code" prop="code" placeholder="请输入验证码" use-suffix-slot>
        <template #suffix>
          <div class="sms-code active" @click="sendCode(true)">
            {{ second > 0 ? `${second}s后再试` : '获取验证码' }}
          </div>
        </template>
      </wd-input>
    </wd-cell>
    <wd-cell title="邮箱" title-width="150rpx">
      <wd-input
        type="text"
        v-model="mode.email"
        prop="email"
        :rules="[{ required: true, message: '请输入邮箱地址' }]"
        placeholder="请输入邮箱地址"
        suffix-icon="edit"
      />
    </wd-cell>
    <wd-cell title="身份证号" title-width="150rpx">
      <wd-input
        type="text"
        v-model="mode.idCardNo"
        prop="idCardNo"
        :rules="[{ required: true, message: '请输入身份证号' }]"
        placeholder="请输入身份证号"
        suffix-icon="edit"
      />
    </wd-cell>
    <wd-cell
      title="上传证件照片"
      custom-class="vertical-cell no-border"
      prop="idCardBackUrl"
      vertical
      title-width="250rpx"
    >
      <div class="photo-group">
        <div class="item mr-20rpx">
          <image
            class="photo active"
            :src="mode.idCardFrontUrl || '/static/images/card-1.png'"
            mode="aspectFit"
            @click="chooseAvatar('idCardFrontUrl')"
          />
          <div class="title">证件正面</div>
        </div>
        <div class="item">
          <image
            class="photo active"
            :src="mode.idCardBackUrl || '/static/images/card-2.png'"
            mode="aspectFit"
            @click="chooseAvatar('idCardBackUrl')"
          />
          <div class="title">证件背面</div>
        </div>
      </div>
    </wd-cell>
  </wd-form>
</template>
<script lang="ts" setup>
import { msgNone } from '@/utils/index'
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
})
defineOptions({ name: 'ApplyStep2' })

const mode = reactive({
  name: '',
  phone: '',
  code: '',
  email: '',
  idCardNo: '',
  idCardFrontUrl: '',
  idCardBackUrl: '',
})

watch(
  () => props.data,
  () => {
    Object.assign(mode, props.data)
  },
  {
    immediate: true,
    deep: true,
  },
)

// 修改头像
function chooseAvatar(path) {
  mode[path] =
    'http://39.108.7.196:9000/homestay-hotels/upload/20240717/df995d0085494409b8d35a2f0b524b0c.png'
  // uni.chooseImage({
  //   count: 1, // 默认9
  //   sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
  //   success(res) {
  //     if (res.errMsg === 'chooseImage:ok') {
  //       uni.showLoading()
  //       http
  //         .uploadFile(res.tempFilePaths[0])
  //         .then((r: any) => {})
  //         .finally(() => {
  //           uni.hideLoading()
  //         })
  //     }
  //   },
  // })
}

const second = ref(0)
function sendCode(click = false) {
  if (click && second.value > 0) {
    return
  }
  if (second.value === 0) {
    second.value = 60
    setTimeout(sendCode, 1000)
  } else {
    second.value--
    if (second.value > 0) {
      setTimeout(sendCode, 1000)
    }
  }
}

const form = ref()
defineExpose({
  validate() {
    return new Promise((resolve, reject) => {
      form.value.validate().then(({ valid, errors }) => {
        if (valid) {
          if (mode.idCardFrontUrl && mode.idCardBackUrl) {
            resolve(mode)
          } else {
            msgNone('请上传身份证正反面')
          }
        } else {
          reject(errors)
        }
      })
    })
  },
  mode,
})
</script>
<style lang="scss" scoped>
@import url(../style.scss);
</style>
